<template>
  <div>
    <div class="container_main">
      <div class="container_left">
        <div class="left">
          <el-timeline style="width: 100%">
            <el-timeline-item class="timeline-wrap" v-for="(activity, index) in timeLineList" :key="index" size="large"
              color="#ccc" :timestamp="activity.timestamp">
              <div :class="[
                activity.status == '0'
                  ? 'timeline-abs'
                  : activity.status == '1'
                    ? 'timeline-abs abs-red'
                    : 'timeline-abs abs-yellow',
              ]"></div>
              <img v-if="activity.type == '1'" src="@/assets/images/icon-top.png" class="timeline-icon" />
              <img v-if="activity.type == '2'" src="@/assets/images/icon-bottom.png" class="timeline-icon" />
            </el-timeline-item>
          </el-timeline>
          <div class="timeline-legend" style="width: 100%; margin-top: 10px">
            <div class="status1">越限</div>
            <div class="status2">重载</div>
            <div class="type1">正向</div>
            <div class="type2">反向</div>
          </div>
        </div>
        <div class="right">
          <div style="width: 100%; height: 100%" id="map" ref="map"></div>
          <div class="map-legend">
            <div class="legend-row" v-for="(item, index) in mapLegend" :key="index">
              <img :src="require('@/assets/images/' + item.img + '.png')" />
              <span>{{ item.text }}</span>
            </div>
          </div>
          <div class="chart-float" :class="{ noshow: !mapChartShow }">
            <div class="title">
              {{ floatChartInfo.title }}
              <span class="close" @click="mapChartClose()">X</span>
            </div>
            <div class="tabs">
              <div class="tab">最严重时刻潮流值：50MW(16:00)</div>
              <!-- <div class="tab">负载率：98%</div> -->
            </div>
            <div class="chart" style="width: 100%; height: 250px;" id="floatchart" ref="floatchart"></div>
          </div>
        </div>
      </div>
      <div class="container_right">
        <div class="fxYuexian" style="cursor: pointer" @click="yuexianTypeEvt(2)">
          反向越限
        </div>
        <div class="part">
          <div class="fxYxian">反向越限</div>

          <div class="title"  style="cursor: pointer"   @click="yuexianTypeEvt(1)">正向越限<span>单位:MW</span></div>
          <div class="tabs">
            <div class="tab-1">
              <div v-for="(item, index) in tab1List" :key="index" @click="selTab1Option(item)">
                <span class="tab1-btn" :class="{ tab1Selected: item.isActive }">{{ item.text }}</span>
              </div>
            </div>
            <div class="tab-panel">
              <div v-for="(item, index) in tab2List" :key="index" @click="selTab2Option(item)">
                <span class="option-btn" :class="{ btnSelected: item.isActive }">{{ item.text }}</span>
              </div>
            </div>
          </div>
          <div class="content">
            <div class="record" v-for="(item, index) in forwardList" :key="index">
              <div class="row1">
                <div class="row-name" :style="{
                  color:
                    item.percent >= 100
                      ? '#ed4646'
                      : item.percent >= 90 && item.percent < 100
                        ? '#d3ba58'
                        : '#d3ba58',
                }">
                  {{ item.name }}
                </div>
                <div class="row-time">{{ item.time }}</div>
                <div class="row-time">
                  <el-button round type="primary" size="mini" @click="jumpPageAd(item)">调节资源</el-button>

                </div>
              </div>
              <div class="row2">
                <div class="info">
                  <div class="label">最大值：</div>
                  <div class="val">{{ item.max }}</div>
                </div>
                <div class="info">
                  <div class="label">限值：</div>
                  <div class="val">{{ item.limit }}</div>
                </div>
                <div class="info" style="cursor: pointer" @click="displayMyLine(item)">
                  <div class="label">负载率</div>
                  <el-progress class="progress" :stroke-width="8" :percentage="item.percent" :show-text="false" :color="item.percent >= 100
                    ? '#ed4646'
                    : item.percent >= 90 && item.percent < 100
                      ? '#d3ba58'
                      : '#d3ba58'
                    "></el-progress>
                  <div class="val" :style="{
                    color:
                      item.percent >= 100
                        ? '#ed4646'
                        : item.percent >= 90 && item.percent < 100
                          ? '#d3ba58'
                          : '#d3ba58',
                  }">
                    {{ item.percent }}%
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="part" style="margin-top: 30px">
          <div class="title bg">省调下发<span></span></div>
          <div class="content shengdxfContent">
            <div class="smllBox">
              <div class="num">1</div>
              <div @click="jumpPage">11:00-15:00,全网负备用不足，最大缺口1000MW (16:45)，调用南京资源45MW
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import mock from "@/utils/home/home.mockdata.js";
import homeMap from "@/utils/home/home.map";
export default {
  name: "balance-city",
  data() {
    return {
      tab1List: [
        { text: "全天最严重", id: 0, isActive: true },
        { text: "12:30最严重", id: 1, isActive: false },
      ],
      tab2List: [
        { text: "主变", id: 0, isActive: true },
        { text: "馈线", id: 1, isActive: false },
      ],
      forwardList: [
        {
          name: "翔宇变2号主变.高",
          time: "2024-07-01 17:00:00",
          max: "43.6",
          limit: "40",
          percent: 109,
        },
        {
          name: "上峰变#2主变.高",
          time: "2024-07-01 17:00:00",
          max: "41",
          limit: "40",
          percent: 105,
        },
        {
          name: "吉龙变2号主变.高",
          time: "2024-07-01 17:00:00",
          max: "38",
          limit: "40",
          percent: 95,
        },
        {
          name: "学景变1号主变.高",
          time: "2024-07-01 17:00:00",
          max: "40",
          limit: "40",
          percent: 75,
        },
      ],
      reverseList: [
        {
          name: "秣陵变2号主变.高",
          time: "2024-07-01 17:00:00",
          max: "43.6",
          limit: "40",
          percent: 109,
        },
        {
          name: "新庄变#2主变.高",
          time: "2024-07-01 17:00:00",
          max: "41",
          limit: "40",
          percent: 105,
        },
        {
          name: "学苑变2号主变.高",
          time: "2024-07-01 17:00:00",
          max: "38",
          limit: "40",
          percent: 95,
        },
        {
          name: "金路变1号主变.高",
          time: "2024-07-01 17:00:00",
          max: "40",
          limit: "40",
          percent: 75,
        },
      ],
      timeLineList: mock.resource_timelineList,
      mapLegend: [
        { text: "变电站", img: "bdz" },
        { text: "线路", img: "line" },
        { text: "设备正向过载", img: "forwardload" },
        { text: "设备反向过载", img: "reverseload" },
      ],
      mapJson: {},
      mapChart: undefined,
      mapChartOption: {
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
        },
        series: [
          {
            name: "平衡分析",
            type: "map",
            z: 1,
            map: this.$store.state.home.mapCity,
            label: {
              show: true,
              color: "#ffffff",
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 10,
              minTurnAngle: 90,
              maxSurfaceAngle: 180,
              lineStyle: {
                type: "dashed",
                cap: "round",
              },
              /*length: 15,
              length2: 10,
              maxSurfaceAngle: 80*/
            },
            itemStyle: {
              normal: {
                // 静态的时候显示的默认样式
                borderWidth: 1, // 边框宽度
                areaColor: {
                  type: "linear",
                  x: 0.5,
                  y: 0.5,
                  r: 0.9,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#59bcc2", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#82CBBE", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                borderColor: "#ffffff", // 边框颜色
              },
              emphasis: {
                // 鼠标移入动态的时候显示的默认样式
                borderWidth: 2, // 边框宽度
                areaColor: "#0979A9", // 地图颜色
              },
            },
            silent: true, //点击区块不响应鼠标事件
            data: [],
          },
        ],
        geo: {
          geoIndex: 1,
          map: this.$store.state.home.mapCity,
          label: {
            show: false,
          },
          zoom: 1,
        },
      },
      floatChartInfo: {
        title: "",
      },
      mapChartShow: false,
      floatchart: undefined,
      floatchartOption: {
        color: ["#2bb193", "#f4b066"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "6%",
          type: "plain",
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["00:15", "05:00", "09:45", "14:30", "19:15", "24:00"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "预测潮流",
            type: "line",
            data: [220, 132, 301, 234, 190, 230, 110],
            smooth: true,
            symbolSize: 0,
          },
          {
            name: "限值",
            type: "line",
            lineStyle: {
              type: "dashed",
            },
            data: [200, 200, 200, 200, 200, 200, 200],
            smooth: true,
            symbolSize: 0,
          },
        ],
      },
    };
  },
  computed: {
    mapCity: {
      get() {
        return this.$store.state.home.mapCity;
      },
    },
  },
  created() { },
  mounted() {
    this.mapJson = require("@/utils/home/mapJson/" + this.mapCity + ".json");
    //地图
    echarts.registerMap(this.mapCity, this.mapJson);
    this.mapChart = echarts.init(this.$refs.map);
    let opt = {
      type: "lines",
      z: 2,
      coordinateSystem: "geo",
      symbolSize: [0, 0],
      lineStyle: {
        width: 3.5,
        type: "solid",
        opacity: 0.8,
        color: "#e6fff8",
        curveness: 0,
      },
      data: this.convertLineData(),
    };
    this.mapChartOption.series.push(opt);
    let pointOpt = {
      name: "标记点",
      type: "scatter",
      coordinateSystem: "geo",
      z: 3,
      data: this.convertImgData(),
      symbolSize: 45,
      label: {
        show: false,
        formatter: function (params) {
          //文本提示框
          return params.value[2];
        },
        position: "right",
      },
      /*itemStyle: {
        color: '#ddb926'
      },
      emphasis: {
        label: {
          show: true
        }
      }*/
    };
    this.mapChartOption.series.push(pointOpt);
    this.mapChart.setOption(this.mapChartOption);
    //给线加点击事件
    this.mapChart.on("click", (params) => {
      if (params.seriesIndex == 1) {
        //点击线段
        //先执行一下关闭
        this.mapChartClose();
        //弹出echarts
        this.floatChartInfo.title = params.data.info;
        this.floatChartInfo.offsetX = params.event.offsetX - 400;
        this.floatChartInfo.offsetY =
          params.event.offsetY + 380 > 980 ? 500 : params.event.offsetY;
        this.mapChartShow = true;
        this.$nextTick(() => {
          if (this.floatchart == undefined) {
            this.floatchart = echarts.init(this.$refs.floatchart);
          }
          this.floatchartOption &&
            this.floatchart.setOption(this.floatchartOption);
        });
      }
    });
    //默认显示一个隐联线02 ---南京测试用
    if (this.mapCity == "nanjing") {



    }
  },
  methods: {

    displayMyLine(it) {
      this.floatChartInfo.title = it.name;
      this.mapChartShow = true;
      this.$nextTick(() => {
        if (this.floatchart == undefined) {
          this.floatchart = echarts.init(this.$refs.floatchart);
        }
        this.floatchartOption &&
          this.floatchart.setOption(this.floatchartOption);
      })
    },
    
    jumpPage() {
      this.$router.push("/jumpPage")
    },
    jumpPageAd(it) {
      // this.$router.push("/jumpPage2")
      // this.$emit('resource-reload',);
      // this.$emit('home-reload')
      this.$emit("redirect", "resource", "didiao");

      sessionStorage.setItem('resouse_PageType', '1')
      sessionStorage.setItem('Name_zi', it.name)

    },
    mapChartClose() {
      this.mapChartShow = false;
      this.floatchart.clear(); //清空图表内容
    },

    yuexianTypeEvt(it){
      if(it == 1){
        this.forwardList = [
            {
              name: "翔宇变2号主变.高",
              time: "2024-07-01 12:30:00",
              max: "43.6",
              limit: "40",
              percent: 109,
            },
            {
              name: "上峰变#2主变.高",
              time: "2024-07-01 17:00:00",
              max: "41",
              limit: "40",
              percent: 105,
            },
            {
              name: "吉龙变2号主变.高",
              time: "2024-07-01 17:00:00",
              max: "38",
              limit: "40",
              percent: 95,
            },
            {
              name: "学景变1号主变.高",
              time: "2024-07-01 17:00:00",
              max: "40",
              limit: "40",
              percent: 75,
            },
          ]

      }else {
        this.forwardList =[
        {
          name: "秣陵变2号主变.高",
          time: "2024-07-01 17:00:00",
          max: "43.6",
          limit: "40",
          percent: 109,
        },
        {
          name: "新庄变#2主变.高",
          time: "2024-07-01 17:00:00",
          max: "41",
          limit: "40",
          percent: 105,
        },
        {
          name: "学苑变2号主变.高",
          time: "2024-07-01 17:00:00",
          max: "38",
          limit: "40",
          percent: 95,
        },
        {
          name: "金路变1号主变.高",
          time: "2024-07-01 17:00:00",
          max: "40",
          limit: "40",
          percent: 75,
        },
      ]
      }
    },


    selTab1Option(data) {
      if (!data.isActive) {
        this.tab1List.forEach(function (obj) {
          obj.isActive = false;
        });
        if (data.text == '全天最严重') {
        } else {
          this.forwardList = [
            {
              name: "秣陵变2号主变.高",
              time: "2024-07-01 12:30:00",
              max: "43.6",
              limit: "40",
              percent: 109,
            },
          ]
        }
        data.isActive = true;
      }
    },
    selTab2Option(data) {
      if (!data.isActive) {
        this.tab2List.forEach(function (obj) {
          obj.isActive = false;
        });
        data.isActive = true;

        if(data.text === '主变'){
          this.forwardList = [
            {
              name: "秣陵变2号主变.高",
              time: "2024-07-01 12:30:00",
              max: "43.6",
              limit: "40",
              percent: 109,
            },]

        }else {
          this.forwardList = [
            {
              name: "上峰变#2主变.高",
              time: "2024-07-01 17:00:00",
              max: "41",
              limit: "40",
              percent: 105,
            },]
        }
      }
    },
    convertImgData() {
      //一些地图中心点变电站
      let mapData = [
        { name: "六合区", img: "mapbdz" },
        { name: "浦口区", img: "mapbdz" },
        { name: "栖霞区", img: "mapbdz" },
        { name: "雨花台区", img: "mapbdz" },
        { name: "江宁区", img: "mapbdz" },
        { name: "溧水区", img: "mapbdz" },
        { name: "高淳区", img: "mapbdz" },
      ];
      let resDatas = [];
      for (let i = 0; i < this.mapJson.features.length; i++) {
        let tmpItem = mapData.find(
          (x) => x.name == this.mapJson.features[i].properties.name
        );
        let resItem = {};
        if (tmpItem) {
          resItem.name = tmpItem.name;
          resItem.value = this.mapJson.features[i].properties.center.concat(
            parseInt(Math.random() * 100)
          );
          resItem.symbol =
            "image://" + require("@/assets/images/" + tmpItem.img + ".png");
          resDatas.push(resItem);
        }
      }
      //一些随机点
      let mapData2 = [
        {
          name: "江宁区1",
          value: [119.016165, 32.103257, 100],
          symbol: "image://" + require("@/assets/images/mapbdz.png"),
          symbolSize: 45,
        },
        {
          name: "江宁区2",
          value: [118.987419, 31.95338, 100],
          symbol: "image://" + require("@/assets/images/mapbdz.png"),
          symbolSize: 45,
        },
        {
          name: "江宁区3",
          value: [118.858638, 31.833693, 100],
          symbol: "image://" + require("@/assets/images/mapbdz.png"),
          symbolSize: 45,
        },
        {
          name: "溧水区1",
          value: [118.996456, 31.42117, 100],
          symbol: "image://" + require("@/assets/images/mapbdz.png"),
          symbolSize: 45,
        },
        {
          name: "高淳区",
          value: [118.893322, 31.266745, 6],
          symbol: "image://" + require("@/assets/images/mapreverse.png"),
          symbolSize: 45,
          label: {
            formatter: "{@[2]}",
            position: "right",
            show: true,
            color: "yellow",
          },
        },
        {
          name: "六合区",
          value: [118.835525, 32.476702, 5],
          symbol: "image://" + require("@/assets/images/mapforward.png"),
          symbolSize: 45,
          label: {
            formatter: "{@[2]}",
            position: "right",
            show: true,
            color: "red",
          },
        },
        {
          name: "浦口区",
          value: [118.499495, 31.963766, 2],
          symbol: "image://" + require("@/assets/images/mapforward.png"),
          symbolSize: 45,
          label: {
            formatter: "{@[2]}",
            position: "right",
            show: true,
            color: "red",
          },
        },
      ];
      resDatas = resDatas.concat(mapData2);
      return resDatas;
    },
    convertLineData() {
      let resDatas = [];
      //一些地图内线
      let mapdata = [
        {
          name: "六合-栖霞",
          coords: [
            [118.85065, 32.340655],
            [118.808702, 32.102147],
          ],
          info: "隐联线01",
        },
        {
          name: "六合-浦口",
          coords: [
            [118.85065, 32.340655],
            [118.625307, 32.05839],
          ],
          info: "隐联线02",
        },
        {
          name: "栖霞-浦口",
          coords: [
            [118.808702, 32.102147],
            [118.625307, 32.05839],
          ],
          info: "隐联线03",
        },
        {
          name: "浦口-雨花台",
          coords: [
            [118.625307, 32.05839],
            [118.77207, 31.995946],
          ],
          info: "隐联线04",
        },
        {
          name: "雨花台-江宁3",
          coords: [
            [118.77207, 31.995946],
            [118.858638, 31.833693],
          ],
          info: "隐联线05",
        },
        {
          name: "溧水-溧水1",
          coords: [
            [119.028732, 31.653061],
            [118.996456, 31.42117],
          ],
          info: "隐联线06",
        },
        {
          name: "雨花台-江宁1",
          coords: [
            [118.77207, 31.995946],
            [119.016165, 32.103257],
          ],
          info: "隐联线07",
        },
        {
          name: "雨花台-江宁2",
          coords: [
            [118.77207, 31.995946],
            [118.987419, 31.95338],
          ],
          info: "隐联线08",
        },
        {
          name: "江宁1-江宁2",
          coords: [
            [119.016165, 32.103257],
            [118.987419, 31.95338],
          ],
          info: "隐联线09",
        },
        {
          name: "江宁3-江宁2",
          coords: [
            [118.858638, 31.833693],
            [118.987419, 31.95338],
          ],
          info: "隐联线10",
        },
        {
          name: "溧水-江宁3",
          coords: [
            [119.028732, 31.653061],
            [118.858638, 31.833693],
          ],
          info: "隐联线11",
        },
      ];
      resDatas = resDatas.concat(mapdata);
      return resDatas;
    },
  },
};
</script>

<style scoped lang="scss">
.container_main {
  display: flex;

  .container_left {
    width: 60%;
    height: 930px;
    display: flex;

    .left {
      width: 12%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }

    .right {
      width: 88%;
      height: 100%;
      position: relative;

      .chart-float {
        position: absolute;
        z-index: 9999;


        background-color: rgb(255, 255, 255, 0.8);


        width: 600px;
        height: 380px;
        padding: 10px;
        border: 1px solid #2eadd3;
        border-radius: 10px;
        box-shadow: 10px 10px 10px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        left: 631px;
        top: 133px;

        &.noshow {
          display: none;
        }

        .title {
          width: 100%;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-bottom: 1px solid #2eadd3;
          color: #2d3b4d;
          font-size: 16px;
          font-weight: 600;

          .close {
            float: right;
            width: 20px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #2e6e6a;
            border-radius: 20px;
            cursor: pointer;
            color: #2e6e6a;
          }
        }

        .tabs {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 50px;

          .tab {
            background: url("../../../assets/images/popup-bg.png") center no-repeat;
            background-size: 100% 100%;
            font-size: 14px;
            height: 40px;
            line-height: 40px;
            padding: 5px 15px;
            color: #000000;
            font-weight: 500;
          }
        }

        .chart {
          width: 100%;
          height: 200px;
          position: relative;
        }
      }

      .map-legend {
        position: absolute;
        z-index: 100;
        right: 20px;
        top: 40px;
        width: 270px;
        height: 80px;
        padding: 10px 15px;
        background: url(../../../assets/images/legend-bg.png) center no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;

        .legend-row {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 50%;
          height: 28px;
          line-height: 28px;

          img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
          }

          span {
            font-size: 14px;
            color: #2b2f3a;
          }
        }
      }
    }
  }

  .container_right {


    width: 39%;
    height: 920px;
    background: url(../../../assets/images/box-total.png) no-repeat;
    background-size: 100% 100%;

    position: relative;

    .fxYuexian {
      position: absolute;
      left: 260px;
      text-align: center;
      font-weight: 600;
      line-height: 30px;
      top: 0px;
      width: 150px;
      height: 30px;
      background: url(../../../assets/images/rightImages/tab1.png) center no-repeat;
    }
  }

  .part {
    width: 100%;
    height: 50%;

    .title {
      width: 100%;
      height: 35px;
      line-height: 35px;
      font-weight: bold;
      padding-left: 88px;
      padding-right: 20px;

      &.bg {
        background: url("../../../assets/images/title-reverse.png") left center no-repeat;
        background-size: 100% 100%;
      }

      span {
        font-size: 12px;
        float: right;
        color: #333;
        font-weight: normal;
      }
    }


  }
}

.timeline-wrap {
  background: url(../../../assets/images/timeline-bg.png) left top no-repeat;
  background-size: 68px 20px;
  padding-top: 1px;
  position: relative;
  padding-bottom: 8px;
}

.timeline-abs {
  position: absolute;
  left: -3px;
  top: -8px;
  width: 32px;
  height: 24px;
  opacity: 0.7;
  border-radius: 5px;
}

.abs-red {
  background-image: linear-gradient(to left, #eee, #c63c63);
  border: 1px #a10c35;
}

.abs-yellow {
  background-image: linear-gradient(to left, #eee, #eee327);
  border: 1px #989007;
}

.timeline-icon {
  position: absolute;
  left: 0px;
  top: -3px;
  width: 14px;
  height: 14px;
}

.timeline-legend {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 14px;
  color: #4a4a4a;
  padding-left: 40px;

  div {
    background-size: 20px auto;
    padding-left: 23px;
  }

  .status1 {
    background: url(../../../assets/images/status1.png) left center no-repeat;
  }

  .status2 {
    background: url(../../../assets/images/status2.png) left center no-repeat;
  }

  .type1 {
    background: url(../../../assets/images/icon-top.png) left center no-repeat;
  }

  .type2 {
    background: url(../../../assets/images/icon-bottom.png) left center no-repeat;
  }
}

.shengdxfContent {



  .smllBox {
    width: calc(100% - 50px);
    margin: auto;
    display: flex;
    border: 1px solid #ccc;
    background-color: rgba(128, 128, 128, 0.111);
    color: red;
    align-items: center;
    cursor: pointer;
    height: 32px;
    line-height: 22px;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 4px;

    .num {
      height: 22px;
      line-height: 22px;
      border-radius: 50%;
      width: 22px;
      text-align: center;
      border-radius: 50;
      background: rgba(255, 0, 0, 0.111);
    }

  }

}


::v-deep .el-progress-bar__outer {
  background: #c1e0dd !important;
}

::v-deep .el-progress.is-success .el-progress-bar__inner {
  background: linear-gradient(to right, #e5f1f2, #408d95) !important;
}

::v-deep .el-icon-circle-check:before {
  content: "";
  display: none;
}
</style>
